<template>
  <PublicLoading v-if="loading.mounted" />
  <div v-else class="dt-content-page">
    <dl class="dt-pmDetail-info table">
      <dt class="dt-title-box">
        <div class="dt-statistics">
          <h2>任务详情</h2>
          <div class="dt-statistics-task">
            <span>任务总数：{{ taskDetailList.totalCount || 0 }}</span>
            <span>进行中：{{ taskDetailList.doingCount || 0 }}</span>
            <span>已完成：{{ taskDetailList.complateCount || 0 }}</span>
            <span>待认领：{{ taskDetailList.waitCount || 0 }}</span>
            <span>已延期：{{ taskDetailList.delayCount || 0 }}</span>
          </div>
          <div class="dt-statistics-output">
            <span>总产值：{{
              taskDetailList.totalOutput
                ? this.$tools.moneyLower(taskDetailList.totalOutput)
                : taskDetailList.totalOutput == null
                  ? '***'
                  : taskDetailList.totalOutput
            }}元</span>
            <span>已完成产值：{{
              taskDetailList.complateOutput
                ? this.$tools.moneyLower(taskDetailList.complateOutput)
                : taskDetailList.complateOutput == null
                  ? '***'
                  : taskDetailList.complateOutput
            }}元</span>
          </div>
        </div>
      </dt>
      <dd class="custom-table por" :class="{ empty: taskDetailList.list.length == 0 }">
        <PublicEmpty v-if="taskDetailList.list.length == 0" :ishowImage="true" />
        <el-table v-else :data="taskDetailList.list" style="width: 100%" border :row-class-name="tableRowClassName"
          @row-click="editTaskCard">
          <el-table-column prop="taskNo" label="编号" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.taskNo || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nodeName" label="项目节点" min-width="100">
            <template slot-scope="scope">
              <!-- <span>{{scope.row.nodeName||'--'}}</span> -->
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="scope.row.nodeName"
                placement="top-start">
                <span class="dt-content-project-list-project">{{ scope.row.nodeName || '--' }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="majorName" label="所属专业" min-width="120">
            <template slot-scope="scope">
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="scope.row.majorName"
                placement="top-start">
                <span class="dt-content-project-list-project">{{ scope.row.majorName || '--' }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="taskName" label="任务名称" min-width="149">
            <template slot-scope="scope">
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="scope.row.taskName"
                placement="top-start">
                <span class="dt-content-project-list-project">{{ scope.row.taskName || '--' }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="taskStateName" label="任务状态" min-width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.taskStateName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taskTypeName" label="任务类型" min-width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.taskTypeName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createName" label="创建人" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.createName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="masterName" label="负责人" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.masterName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="output" label="产值" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.output === null">***</span>
              <span v-else>{{ scope.row.output }}元</span>
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="进度" min-width="60">
            <template slot-scope="scope">
              <span v-if="scope.row.progress >= 0">{{ scope.row.progress }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="计划工期" min-width="179">
            <template slot-scope="scope">
              <span v-if="scope.row.taskType != 1 && scope.row.demandState == 20">--</span>
              <span v-else>{{ scope.row.startTime.split(' ')[0] }} 至 {{ scope.row.endTime.split(' ')[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="planDays" label="计划天数(天)" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.planDays || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="completeTime" label="完成时间" min-width="100">
            <template slot-scope="scope">
              <span> {{ scope.row.completeTime ? scope.row.completeTime.split(' ')[0] : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="consumeDays" label="工期消耗（天）" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.demandState == 20">--</span>
              <span v-else>{{ scope.row.consumeDays || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="completeState" label="完成情况" min-width="100">
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.completeState > 0">提前 {{ Math.abs(scope.row.completeState) }} 天完成</span>
              <span v-else-if="scope.row.completeState < 0">延期 {{ Math.abs(scope.row.completeState) }} 天</span>
              <span v-else>--</span>
            </template> -->
            <template slot-scope="scope">
              {{ scope.row | filterComState }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-if="total > 20" class="dt-pagination" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
          layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
      </dd>
    </dl>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      loading: { mounted: false },
      taskDetailList: { list: [] },
      currentPage: 1,
      page: 1,
      pageSize: 20,
      total: 0
    }
  },
  filters: {
    filterComState(row) {
      if (row.taskState !== 7) {
        return '--'
      } else {
        if (row.completeState > 0) {
          return '提前' + row.completeState + '天完成'
        } else if (row.completeState < 0) {
          return '延期' + Math.abs(row.completeState) + '天完成'
        } else {
          return '按时完成'
        }
      }
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    }
  },
  methods: {
    goEditNode() {
      var data = { elTab: '2-0', rootProjectId: this.query.rootProjectId }
      this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.completeState < 0) {
        return 'postpone-row'
      }
      if (row.completeState > 0) {
        return 'advance-row '
      }
    },
    getTaskList() {
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId,
          page: this.page,
          pageSize: this.pageSize
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/taskStat'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.taskDetailList = data.data
              this.total = data.data.total
            } else {
              this.taskDetailList = ''
            }
          })
        })
        .catch((error) => { })
    },
    showCard() {
      this.dataCard.isShowCard = true
    },
    //点击表格每一行 编辑
    editTaskCard(row, column, event) {
      if (row.taskType == 1) {
        if (row.createUid == this.uid) {
          this.$root.$emit('openTaskCard', { mode: 'edit', rootProjectId: row.rootProjectId, rootProjectName: row.projectName, taskId: row.id })
        } else {
          this.$root.$emit('openTaskCard', { mode: 'view', rootProjectId: row.rootProjectId, rootProjectName: row.projectName, taskId: row.id })
        }
      } else {
        // let detailUrl = '/orderNormalJF?id=' + row.demandId + '&demandTitle=' + row.taskName + '&bidType=' + row.taskType
        let dataUrl = ''
        if (row.demandState == 20) {
          dataUrl = 'https://www.ccccdt.com/publish/write?demandId=' + row.demandId
        } else {
          dataUrl = 'https://www.ccccdt.com/orderDetail?id=' + row.demandId
        }
        window.open(dataUrl)
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getTaskList()
    }
  },
  watch: {
    //路由hash变化 加载组件
    $route(to, from) {
      if (to.hash !== from.hash) {
        this.getTaskList()
      }
    }
  },
  mounted() {
    if (this.query.rootProjectId) {
      this.getTaskList()
    }
  }
}
</script>
<style scoped>
.dt-content-page {
  margin-top: 0px;
  background: #f2f3f5;
}

.dt-pmDetail-info dt {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dt-pmDetail-info h2 {
  font-size: 20px;
  /* margin: 16px 0px 12px; */
  margin: 20px 0px;
}

.dt-pmDetail-info dd {
  padding: 14px;
  background: #fff;
}

.dt-pm-info span {
  margin-right: 40px;
}

.dt-operate,
.dt-operate-edit {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* 节点卡片 */
.dt-node-list {
  /* padding: 14px; */
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  /* overflow-x: auto; */
}

.dt-node-add,
.dt-node-card {
  display: -webkit-flex;
  display: flex;
  width: 200px;
  height: 92px;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;

  justify-content: center;
  cursor: pointer;
}

.dt-node-add .el-button--text {
  color: #c0c4cc;
}

.dt-node-add:hover {
  border: 1px dashed #d6e4ff;
  background: #f0f5ff;
}

.dt-node-add:hover .el-button--text {
  color: #2f54eb;
}

.dt-node-item {
  /* margin-bottom: 14px; */
  width: 202px;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.dt-node-card {
  width: auto;
  height: 63px;
  padding: 16px 12px 12px;
  border: 1px solid #d6e4ff;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.dt-node-card.working {
  background-color: #f0f5ff;
}

/* .dt-node-card:hover {
  background-color: #85a5ff;
} */
.dt-node-card.dt-cur {
  background-color: #85a5ff;
}

/* .dt-node-card:hover h4,
.dt-node-card:hover p,
.dt-node-card:hover .dt-node-progress, */
.dt-node-card.dt-cur h4,
.dt-node-card.dt-cur p,
.dt-node-card.dt-cur .dt-node-progress {
  color: #fff;
}

.dt-node-card h4 {
  color: #1f1f1f;
}

.dt-node-card p {
  margin: 13px 0px 10px;
  color: #606266;
}

.dt-node-card>>>.el-popover {
  min-width: 125px;
}

.dt-node-progress {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* .dt-nodeclose, */
.dt-nodeTag {
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background: #f2f3f5;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 8px;
}

.dt-nodeTag {
  padding: 0px 8px;
  width: auto;
  /* right: 25px; */
  font-size: 12px;
  color: #909399;
}

.dt-nodeTag.completed {
  background: #d9f7be;
  color: #52c41a;
}

.dt-nodeTag.working {
  background: #fffbe6;
  color: #faad14;
}

.el-icon-circle-plus {
  right: -10px;
  font-size: 20px;
  color: #2f54eb;
  z-index: 10;
}

.dt-add-node li {
  line-height: 32px;
}

.dt-node-time {
  margin-top: 8px;
  display: flex;
  display: -webkit-flex;
  font-size: 12px;
  color: #606266;
  justify-content: center;
  align-items: center;
}

.dt-node-time.date {
  justify-content: center;
}

.dt-node-time span {
  margin-left: 4px;
}

/* .dt-node-time >>> .el-button {
  padding: 0px;
  font-size: 12px;
} */
.dt-node-time .inAdvance {
  color: #52c41a;
}

.dt-node-time .postpone {
  color: #f5222d;
}

.dt-line {
  margin-left: 60px;
}

.dt-line .dt-dashed-line {
  left: -63px;
  width: 62px;
  height: 1;
  border-top: 1px dashed #e1e6f0;
}

.dt-null {
  color: #909399;
}

/* 节点卡片end */

/* 任务详情 */
.dt-title-box {
  /* padding: 20px 0px 12px; */
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
}

.dt-title-box .dt-statistics {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dt-statistics h2 {
  margin-right: 40px;
}

.dt-statistics-task,
.dt-statistics-output {
  margin-top: 8px;
}

.dt-statistics-task span,
.dt-statistics-output span {
  font-size: 12px;
  vertical-align: middle;
  color: #606266;
}

.dt-statistics-task span {
  margin-right: 20px;
}

.dt-statistics-output {
  border-left: 1px solid #c0c4cc;
}

.dt-statistics-output span {
  margin-left: 20px;
}

.dt-pmDetail-info.table {
  flex: 1;
}

/* 任务详情end */

/* table */
.dt-edit-node>>>.el-icon-edit-outline {
  margin-left: 12px;
  font-weight: 600;
  font-size: 16px;
}

.dt-edit-node>>>.el-button {
  padding: 0px;
}

.dt-operate-edit>>>.el-button {
  width: 26px;
  height: 26px;
}

.dt-operate-edit>>>.el-input {
  margin-right: 10px;
}

.custom-table {
  flex: 1;
  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.custom-table.empty {
  display: flex;
  justify-content: center;
}

.dt-pagination {
  margin-top: 40px;
}

.custom-table>>>.el-table .el-table__cell {
  padding: 4px 0px;
  font-size: 12px;
}

.custom-table>>>.el-table__body-wrapper {
  color: #1f1f1f;
}

.custom-table>>>.el-table__header th {
  background-color: #fafafa;
}

.custom-table>>>.el-button {
  padding: 0px;
}

.custom-table>>>.postpone-row {
  background: #fff0f0;
}

.custom-table>>>.advance-row {
  background: #f6ffed;
}

.custom-table>>>.el-table tr {
  cursor: pointer;
}

.dt-content-project-list-project {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
